<template>
  <div id="panel">
    <el-row :gutter="20">
      <!--部门数据-->

      <el-col :span="5" class="head-container">
        <!-- <tree-select v-model="deptName" @node-click="handleNodeClick" /> -->
        <tree-select v-model="deptName" @node-click="treeNodeClickk" />
      </el-col>
      <!--用户数据-->

      <el-col :span="19" class="body-container">
        <el-tabs
          v-model="activeName"
          @tab-click="handleClick"
          style="padding: 20px"
        >
          <el-tab-pane label="监测数据日报" name="a">
            <DSPs :selTreeId="selTreeId" v-if="activeName === 'a'" />
          </el-tab-pane>
          <el-tab-pane label="监测数据周报" name="b">
            <dischargeOutlet :selTreeId="selTreeId" v-if="activeName === 'b'" />
          </el-tab-pane>
          <el-tab-pane label="监测数据月报" name="c">
            <gyPolluter :selTreeId="selTreeId" v-if="activeName === 'c'" />
          </el-tab-pane>
          <el-tab-pane label="监测数据季报" name="d">
            <publicSs :selTreeId="selTreeId" v-if="activeName === 'd'" />
          </el-tab-pane>
          <el-tab-pane label="监测数据年报" name="e">
            <farmingMy :selTreeId="selTreeId" v-if="activeName === 'e'" />
          </el-tab-pane>
          <el-tab-pane label="时间区间报表" name="f">
            <hydrology :selTreeId="selTreeId" v-if="activeName === 'f'" />
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "OneRiverOneFile",
  components: {
    TreeSelect: () => import("./riverTreeSelect.vue"),
    DSPs: () => import("./DSPs/index.vue"),
    dischargeOutlet: () => import("./dischargeOutlet/index.vue"),
    farmingMy: () => import("./farmingMy/index.vue"),
    gyPolluter: () => import("./gyPolluter/index.vue"),
    hydrology: () => import("./hydrology/index.vue"),
    publicSs: () => import("./publicSs/index.vue"),
  },
  data() {
    return {
      activeName: "a",
      // 部门名称
      deptName: undefined,
      selTreeId: null,
    };
  },
  methods: {
    // 获取tree选中节点
    handleNodeClick(data) {
      console.log(">>>树选中节点", data);
      this.queryParams.segmentid = data;
      this.handleQuery();
    },
    treeNodeClickk(val) {
      // 选中的树id
      console.log(">>>val为啥不生效啊       ", val);
      this.selTreeId = val;
    },
    // tab点击
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>

<style lang="scss" scoped>
#panel {
  padding-bottom: 40px;
  min-height: calc(100% - 20px);
  margin: 0;
}
</style>
